<template>
  <div>
    <el-container>
      <div class="bg">
        <img src="../assets/rate_table.jpg" width="100%" height="100%" />
      </div>
      <el-header>
        <el-input
          v-model="keyword"
          :placeholder="placeholder"
          prefix-icon="el-icon-search"
          style="width: 350px; margin-right: 10px; margin-top: 20px"
          clearable
          @clear="resetForm"
          @keydown.enter.native="search"
        ></el-input>
        <el-button
          :disabled="disabled"
          icon="el-icon-search"
          type="primary"
          @click="search"
        >
          搜索
        </el-button>
      </el-header>
      <el-container>
        <el-main>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="评论">
                    <span>{{ props.row.comment }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="区块号" prop="id"> </el-table-column>
            <el-table-column label="时间" prop="time"> </el-table-column>
            <el-table-column label="评分" prop="rate"> </el-table-column>
            <el-table-column label="评论编号" prop="commentid">
            </el-table-column>
          </el-table>
        </el-main>
        <el-aside>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <img id="merchantImage" src="../assets/logo.png" class="image" />
              <br />
              <h2 class="title">{{ Info.name }}</h2>
            </div>
            <div>
              <span>介绍:</span>
              <p v-html="Info.introduction"></p>
              <span>位置:</span>
              <p v-html="Info.address"></p>
              <span>评分:</span>
              <p v-html="Info.score"></p>
              <span>联系方式:</span>
              <p v-html="Info.phone"></p>
              <span>创立时间:</span>
              <p v-html="Info.set_time"></p>
            </div>
          </el-card>
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: "请输入店铺进行搜索，可以直接回车搜索...",
    },
  },
  data() {
    return {
      keyword: "",
      tableData: [],
      Info: {
        image_url: "",
        name: "",
        address: "暂无",
        introduction: "暂无",
        score: "暂无",
        phone: "暂无",
        set_time: "暂无",
      },
    };
  },
  mounted() {
    this.getData();
    this.getInfo();
  },
  methods: {
    getData: function () {
      this.axios({
        method: "get",
        url: "http://localhost:8816/getComment",
        params: {
          name: this.$route.query.name,
        },
      })
        .then((res) => {
          console.log("getData:res.data");
          console.log(res.data);

          if(res.data.data.infos !== null) {
            var rateList = res.data.data.infos;
            this.Info.score = res.data.data.score;
            this.tableData = [];
            rateList.forEach((item) => {
              const tableData = {};
              tableData.id = item.block;
              tableData.comment = item.comment;
              tableData.rate = item.star;
              tableData.time = item.time;
              tableData.commentid = item.commentid;
              this.tableData.push(tableData);
            });
          }
        })
        .catch((error) => {
          alert("搜索失败");
          console.log(error);
        });
    },
    getInfo: function () {
      this.axios({
        method: "get",
        url: "http://localhost:8816/merchantName",
        params: {
          name: this.$route.query.name,
        },
      })
        .then((res) => {
          console.log("getInfo:res.data");
          console.log(res.data);
          var merchant_Info = res.data;
          this.Info.image_url = merchant_Info.image_url;
          this.Info.name = merchant_Info.name;
          this.Info.address = merchant_Info.address;
          this.Info.introduction = merchant_Info.introduction;
          this.Info.phone = merchant_Info.phone;
          this.Info.set_time = merchant_Info.set_time.split("T")[0];
          document.getElementById("merchantImage").src = this.Info.image_url;
        })
        .catch((error) => {
          alert("商家信息获取失败");
          console.log(error);
        });
    },
    back() {
      this.$router.push("/");
    },
    search() {
      let _this = this;
      if (_this.keyword === "") {
        alert("搜索关键词不能为空");
      } else {
        _this.$router.push({
          path: "/rate_table",
          query: { name: _this.keyword },
        });
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.verticalBar {
  width: 2px;
  height: 18cm;
  background: rgb(20, 19, 19);
  display: inline-block;
  margin-top: 31px;
  vertical-align: top;
  margin-right: 29px;
  margin-left: 30px;
}
.image {
  width: 75%;
  height: 75%;
}
.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
span {
  float: left;
}
</style>
